<template>
  <view class="goods-item"> 
  <!-- 左侧盒子 -->
    <view class="goods-item-left">
      <image :src="goods.goods_small_logo || defaultImg" class="good-img"/>
    </view>
    <!-- 右侧盒子 -->
    <view class="goods-item-right">
      <view class="goods-name">{{goods.goods_name}}</view>
      <view class="goods-price">￥{{goods.goods_price | toFixed}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"goods",
    props:{
      goods:{
        type:Object,
        default: () => {}
      }
    },
    data() {
      return {
        defaultImg:'https://img0.baidu.com/it/u=2044084159,782404825&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=678'
      };
    },
    filters: {
      toFixed(num) {
        return num.toFixed(2)
      }
    }
  }
</script>

<style lang="scss" scoped>
.goods-item {
  display: flex;
  .goods-item-left {
    margin-right: 20rpx;
    .good-img {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .goods-item-right {
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 28rpx;
    .goods-price {
      color: red;
    }
  }
}
</style>